<script lang="ts" setup>
import { ref } from 'vue'

const addressList = ref([
  {
    id: 1,
    name: '张三',
    tel: '1234567890',
    address: '北京市朝阳区',
  },
  {
    id: 2,
    name: '李四',
    tel: '0987654321',
    address: '上海市浦东新区',
    isDefault: true, // 是否为默认地址
  },
  // ...更多地址
])
</script>

<template>
  <div class="my-address-container">
    <div class="header">收货地址</div>
    <div class="desc">新增收货地址</div>
    <div class="add-address-form">
      <!-- 新增收货地址表单 -->
      <div class="input-box">
        <label for="address">地址信息</label>
        <input id="address" type="text" placeholder="请输入地址信息" />
      </div>
      <div class="input-box">
        <label for="buyer">收货人</label>
        <input id="buyer" type="text" placeholder="请输入收货人姓名" />
      </div>
      <div class="input-box">
        <label for="phone">手机号码</label>
        <input id="phone" type="text" placeholder="请输入手机号码" />
      </div>
      <div class="operation">
        <div class="save">
          <button>保存</button>
        </div>
        <div class="cancel">
          <button>取消</button>
        </div>
      </div>
    </div>
    <div class="address-list-empty" v-if="!addressList.length">
      暂无收货地址
    </div>
    <div class="address-list" v-else>
      <!-- 收货地址列表 -->
      <div
        class="address-item"
        v-for="address in addressList"
        :key="address.id"
      >
        <div class="name">{{ address.name }}</div>
        <div class="tel">{{ address.tel }}</div>
        <div class="address">{{ address.address }}</div>
        <div class="operation">
          <div class="edit">
            <button>编辑</button>
          </div>
          <div class="delete">
            <button>删除</button>
          </div>
          <div class="default" v-if="address.isDefault">默认地址</div>
          <div class="set-default" v-else>
            <button>设为默认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.add-address-form {
  margin-top: 20px;
  .input-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    label {
      width: 80px;
      font-size: 14px;
      color: #666;
    }
    input {
      flex: 1;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0 10px;
    }
  }
  .operation {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .save {
    button {
      width: 100px;
      height: 40px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
    }
  }
  .cancel {
    button {
      width: 100px;
      height: 40px;
      background-color: #fff;
      color: #007bff;
      border: 1px solid #007bff;
      border-radius: 4px;
      font-size: 16px;
    }
  }
}
.address-list-empty {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
.address-list {
  margin-top: 20px;
}
.address-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  .name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .tel {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
  .address {
    font-size: 14px;
    color: #666;
  }
  .operation {
    margin-top: 10px;
    display: flex;
  }
  .edit {
    margin-right: 10px;
    button {
      width: 80px;
      height: 30px;
      background-color: #fff;
      color: #007bff;
      border: 1px solid #007bff;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  .delete {
    button {
      width: 80px;
      height: 30px;
      background-color: #fff;
      color: #dc3545;
      border: 1px solid #dc3545;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  .default {
    margin-left: auto;
    font-size: 14px;
    color: #666;
  }
  .set-default {
    margin-left: auto;
    font-size: 14px;
    button {
      width: 80px;
      height: 30px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
    }
  }
}
</style>
